<template>
  <div class="virtually-title-right-menu" @mouseleave="mouseleave">
    <draggable
      :list="menus"
      handle=".drag-area"
      animation="300"
      :swapThreshold="0.53"
      :forceFallback="true"
      :fallbackTolerance="3"
      @start.prevent.stop="onStart"
      @end.prevent.stop="onEnd">
      <div
        :key="menu.key"
        v-for="menu in menus"
        v-show="!menu.filter || menu.filter(column)"
        @mouseover="mouseover($event, menu)"
        @click="rightMenuClick(column, menu)"
        class="title-right-menu-item">
        <div :class="isDrag ? 'drag-area' : 'no-drag'">
          <icon-font class="drag-icon" v-if="menu.draggable" type="cap-icon-drag" />
          <a-checkbox
            style="margin-right: 4px"
            v-if="menu.type == 'checkBox'"
            v-model="menu.value"></a-checkbox>
          <div class="name-context" :title="menu.name">
            {{ menu.name }}
          </div>
        </div>
        <div v-if="menu.children"><icon-font type="cap-icon-youjiantou" /></div>
        <a-switch
          v-if="menu.type == 'switch'"
          size="small"
          :disabled="menu.value && menus.filter((m) => m.value).length === 1"
          v-model="menu.value" />
      </div>
    </draggable>
  </div>
</template>
<script>
  import draggable from 'vuedraggable';
  export default {
    name: 'UiFieldset',
    components: {
      draggable
    },
    props: {
      columns: {},
      column: {},
      menus: {},
      confirm: {},
      deep: {
        type: Number,
        default: 0
      },
      isDrag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showSubMenus: false,
        subMenus: [],
        subMenuStyle: {},
        columnsIsChange: false
      };
    },
    mounted() {},
    methods: {
      onStart() {
        this.start = true;
      },
      onEnd() {
        this.start = false;
      },
      mouseover(event, menu) {
        if (menu.children) {
          let dom = event.target || event.srcElement;
          let brc = dom.getBoundingClientRect();
          // 大于表格宽度，则显示到右侧
          let isLeft = false;
          let cldStyle = menu.childrenMenuStyle || {};
          let cldWidthPx = cldStyle.width || '96px';
          let cldWidth = Number(cldWidthPx.replace('px', ''));
          if (brc.right + cldWidth + 20 > window.innerWidth) {
            isLeft = true;
          }
          this.showSubMenus = true;
          this.subMenus = menu.children;
          this.subMenuStyle = {
            position: 'absolute',
            top: dom.offsetTop - 10 + 'px',
            left: isLeft ? '-' + cldWidthPx : '96px'
          };
          if (menu.childrenMenuStyle) {
            this.subMenuStyle = {
              ...this.subMenuStyle,
              ...cldStyle
            };
          }
          if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
          }
        } else {
          this.showSubMenus = false;
        }
      },
      subMouseleave() {
        this.timer = setTimeout(() => {
          this.showSubMenus = false;
          this.updataColumns();
        }, 300);
      },
      updataColumns() {
        this.columnsIsChange = false;
        this.$emit('updataColumns');
      },
      mouseleave() {
        if (this.start) return;
        this.$emit('mouseleave');
        if (this.deep === 0) {
          this.updataColumns();
        }
        this.showSubMenus = false;
        if (this.confirm) {
          this.confirm();
        }
      },
      rightMenuClick(column, menu) {
        if (typeof column.dropdownMenus[menu.key] === 'object') {
          column.dropdownMenus[menu.key].clickHandel &&
            column.dropdownMenus[menu.key].clickHandel(column, menu);
        } else if (menu.click) {
          menu.click(column, menu);
        }
        this.confirm && this.confirm();
      }
    }
  };
</script>
